<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="__PUBLIC__/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__PUBLIC__/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="__PUBLIC__/css/style.min.css?v=4.1.0" rel="stylesheet">
    <link href="__PUBLIC__/css/animate.min.css" rel="stylesheet">
    <link href="__PUBLIC__/css/style.min.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" href="__PUBLIC__/css/fileinput/fileinput.css">
</head>

<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInLeft">
    <div class="row" id="form">
        <div class="col-sm-12">
            <div class="ibox">

                <div class="ibox-content">
                    <form method="post" action="" class="form-horizontal" id="valid_form">

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">昵称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="content.name" placeholder="没有就请取一个"><br />
                            </div>
                            <label class="col-sm-2 control-label">品种</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="content.varieties" placeholder="不知道就写'猫','狗'这种"><br />
                            </div>
                            <label class="col-sm-2 control-label">年龄</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="content.age" placeholder="非必填">
                            </div>
                        </div>


                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">图片</label>
                            <div class="col-sm-10">
                                <input type="file" name="img_file" id="img" multiple class="file-loading">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">出售OR赠送?</label>
                            <div class="col-sm-10">
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="reward" value="1" v-model="content.hasReward">出售
                                    </label>
                                    <label>
                                        <input type="radio" name="reward" value="0" v-model="content.hasReward" checked>赠送
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div v-show="content.hasReward==='1'">
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">价格:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" v-model="content.reward">
                                </div>
                            </div>
                        </div>



                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">描述</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" cols="30" rows="2" v-model="content.description" required></textarea>
                            </div>
                        </div>


                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button id="send" type="button" class="btn btn-primary" v-on:click="submit">发布</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="__PUBLIC__/js/jquery.min.js?v=2.1.4"></script>
<script src="__PUBLIC__/js/bootstrap.min.js?v=3.3.6"></script>
<script src="__PUBLIC__/js/layui/layui.all.js"></script>
<script src="__PUBLIC__/js/vue.js"></script>
<script src="__PUBLIC__/js/vue-resource.js"></script>
<script src="__PUBLIC__/js/fileinput/fileinput.js"></script>
<script src="__PUBLIC__/js/fileinput/fileinput_locale_zh.js"></script>
<script>
    function randomString(len) //随机字符串生成,用于生成唯一识别码
    {
        len = len || 32;
        var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
        var maxPos = $chars.length;
        var pwd = '';
        for (i = 0; i < len; i++) {
            pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }


    var form=new Vue({
        el:"#form",
        data:{
            content:{
                name:"",
                varieties: "",
                age: 0,
                hasReward:"",
                reward:'',
                code:'',
                description:""
            }
        },
        methods:{
            submit:function () {
                this.$http.post('Release',this.content).then(
                    (data)=>
                    {
                        if (data.body.result==='success')
                        {
                            layer.msg('发布成功');
                            $("#send").attr('disabled',true);
                        }
                        else
                        {
                            layer.msg('发布失败');
                        }
                    }
                )
            }
        },
        created:function () {
            this.content.code=randomString();
        }
    })

    $('#img').fileinput({
        language:'zh',
        uploadUrl: 'UploadApi',
        allowedFileExtensions: ['jpg','gif','png','jpeg'],
        showUpload: true,
        showCaption: false,
        browseClass: 'btn btn-primary',
        maxFileCount: 10,
        uploadExtraData:function (previewId, index) {
            return {
                code:form.content.code,
            };
        },
    }).on('filebatchselected', function (event, data, id, index) {
        $(this).fileinput("upload");
    }).on("fileuploaded", function(event, data) {
        if (data.result==='success')
            layer.msg('上传成功')
    });
</script>
</body>
</html>
